<script setup lang="ts">
import type { FormRules } from 'element-plus'
import type { SysDict, SysDictCustomField } from '@/apis/system/sysDictApi'
import { reactive } from 'vue'
import { SysDictCustomFieldTypes } from '@/apis/system/sysDictApi'

const model = defineModel<SysDict>({ required: true })

const customFieldRules = reactive<FormRules<SysDictCustomField>> ({
  name: [
    { required: true, message: '请输入自定义字段名称', trigger: 'blur' },
    { pattern: /[a-z][a-zA-Z0-9]+/, message: '自定义字段格式错误', trigger: 'blur' },
    { validator: (_, value: string, callback: (error?: string | Error) => void) => {
      if (model.value?.customFields && model.value?.customFields.filter(f => f.name === value).length > 1) {
        callback('自定义字段名称重复')
      }
      else {
        callback()
      }
    }, trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请输入自定义字段类型', trigger: 'blur' },
  ],
  title: [
    { required: true, message: '请输入自定义字段标题', trigger: 'blur' },
  ],
})

function createCustomField() {
  if (model.value.customFields === undefined) {
    model.value.customFields = []
  }
  model.value.customFields.push({})
}
</script>

<template>
  <el-button type="primary" @click="createCustomField()">
    添加
  </el-button>

  <el-table
    v-if="model"
    :data="model.customFields"
    show-overflow-tooltip
    highlight-current-row
    stripe

    border class="mt-2"
  >
    <el-table-column type="index" label="#" />
    <el-table-column prop="name" label="名称" width="150">
      <template #default="{ row, $index }">
        <el-form-item :prop="`customFields[${$index}].name`" :rules="customFieldRules.name">
          <el-input v-model="row.name" clearable />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" width="150">
      <template #default="{ row, $index }">
        <el-form-item :prop="`customFields[${$index}].title`" :rules="customFieldRules.title">
          <el-input v-model="row.title" clearable />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="类型" width="150">
      <template #default="{ row, $index }">
        <el-form-item :prop="`customFields[${$index}].type`" :rules="customFieldRules.type">
          <el-select v-model="row.type" clearable>
            <el-option v-for="(item, index) in SysDictCustomFieldTypes" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="nullable" label="可为空" width="80" :rules="customFieldRules.nullable">
      <template #default="{ row, $index }">
        <el-form-item :prop="`customFields[${$index}].nullable`">
          <el-switch v-model="row.nullable" />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="120">
      <template #default="{ $index }">
        <el-button link type="danger" @click="model.customFields?.splice($index, 1)">
          删除
        </el-button>
        <el-button
          type="primary" link :disabled="$index === 0"
          @click="[model.customFields![$index], model.customFields![$index - 1]] = [model.customFields![$index - 1], model.customFields![$index]]"
        >
          上移
        </el-button>
        <el-button
          type="primary" link :disabled="($index + 1) === model.customFields?.length"
          @click="[model.customFields![$index], model.customFields![$index + 1]] = [model.customFields![$index + 1], model.customFields![$index]]"
        >
          下移
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
